<template>
	<div class="container">
		<view class="system-height" :style="{height:statusBarHeight}"></view>
		<view class="content">
			<view class="asset-row">
				<view class="asset-item">
					<text class="label">TX通证</text>
					<text class="value">{{userInfo.token}}</text>
				</view>
				<view class="asset-item">
					<text class="label">乐豆</text>
					<text class="value">{{userInfo.beans}}</text>
				</view>
				<view class="asset-item">
					<text class="label">当前价格</text>
					<text class="value">{{userInfo.tokenRate}}</text>
				</view>
			</view>
		</view>
		<!-- 操作按钮组 -->
		<view class="action-buttons">
			<view class="action-btn" @click="onout">
				<image src="@/static/blind/out.png"></image>
				<view>OTC出售</view>
			</view>
			<view class="action-btn" @click="onyun">
				<image src="@/static/blind/yunsl.png"></image>
				<view>云算力</view>
			</view>
			<view class="action-btn" @click="onbuy">
				<image src="@/static/blind/jiaoyi.png"></image>
				<view>购买</view>
			</view>
		</view>
		<view class="echart">
			<Echats :erchatList="erchatList" />
		</view>
		<view class='mask' @touchmove.stop.prevent="false" :hidden='active==false'></view>
	</div>
</template>

<script>
	import {
		gettradeList,
		gettokenList,
		getindexList,
		getmyList,
		subreceive,
		subcancel,
		submitpay,
		subconfirm
	} from '@/api/new.js';
	import Echats from "./compent/echarts.vue"
	import pageFooter from "@/components/pageFooter/index.vue";
	let statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	export default {
		components: {
			Echats,
			pageFooter
		},
		data() {
			return {
				activeTab: 0,
				walletAddress: 'Ixwbce8dbebd45bb6a12',
				tabs: ['买入', '出售', '我的订单'],
				toList: [],
				userInfo: {},
				size: 20,
				page: 1,
				type: 1,
				active: false,
				Id: null,
				assureDrawer: false,
				openvalue: {},
				Listdetail: [],
				title: "",
				clickitem: {},
				statusBarHeight: statusBarHeight,
				erchatList: {}
			}
		},
		mounted() {
			this.getList()
			this.getUserInfo()
			this.getEchats()
		},
		watch() {

		},
		methods: {
			getEchats() {
				gettokenList().then((res) => {
					console.log("res", res)
					this.erchatList = {
						categories: res.data.dateStr,
						series: [{
							name: "TX通证",
							data: res.data.tokenAmounts
						}]
					}
					this.loading = false
				}).catch(err => {
					this.loading = false
				});
			},
			getList: function() {
				this.loading = true
				const data = {
					limit: this.size,
					page: this.page,
					type: this.type
				}
				gettradeList(data).then((res) => {
					console.log(res)
					this.toList = res.data.list
					this.loading = false
				}).catch(err => {
					this.loading = false
				});
			},
			getUserInfo: function() {
				this.loading = true
				getindexList().then((res) => {
					console.log(res)
					this.userInfo = res.data
					this.loading = false
				}).catch(err => {
					this.loading = false
				});
			},
			switchTab(index) {
				this.activeTab = index
				if (index === 0) {
					this.type = 1
					this.getList()
				} else if (index === 1) {
					this.type = 2
					this.getList()
				} else {
					this.getmyLists()
				}
			},
			getmyLists: function() {
				getmyList().then((res) => {
					console.log(res)
					this.Listdetail = res.data.list
					this.loading = false
				}).catch(err => {
					this.loading = false
				});
			},
			copyAddress() {
				navigator.clipboard.writeText(this.walletAddress)
					.then(() => this.$message.success('复制成功'))
					.catch(() => this.$message.error('复制失败'));
			},
			onout: function() {
				uni.navigateTo({
					url: `/pages/blind/out?type=1`
				})
			},
			onyun: function() {
				uni.switchTab({
					url: "/pages/recreation/index"
				})
			},
			onbuy: function() {
				uni.navigateTo({
					url: `/pages/blind/out?type=2`
				})
			},
			onStatus: function(type) {
				let data = ""
				if (type === -1) {
					data = "取消"
				} else if (type === 1) {
					data = "挂单"
				} else if (type === 2) {
					data = "待付款"
				} else if (type === 3) {
					data = "已支付"
				} else {
					data = "已确认"
				}
				return data
			},
			subout: function(value) {
				this.openvalue = value
				this.Id = value.id
				// this.assureDrawer = true
				this.active = true
			},
			subinto: function(value) {
				this.Id = value.id
				this.active = true
			},
			cancel: function() {
				this.active = false
			},
			submitout: function() {
				const data = {
					id: this.Id,
				}
				subreceive(data).then((res) => {
					console.log(res)
					if (res.code === 200) {
						this.$util.Tips({
							title: "成功"
						});
						this.loading = false
						this.active = false
						this.getList()
					}
				}).catch(err => {
					this.$util.Tips({
						title: err
					});
					this.loading = false
				});
			},
			submitinto: function() {
				const data = {
					id: this.Id,
				}
				subreceive(data).then((res) => {
					console.log(res)
					if (res.code === 200) {
						this.$util.Tips({
							title: "成功"
						});
						this.loading = false
						this.active = false
						this.getList()
					}
				}).catch(err => {
					this.$util.Tips({
						title: err
					});
					this.loading = false
				});
			},
			ondetail: function() {
				uni.navigateTo({
					url: "/pages/blind/detail"
				})
			},
			closeAssure() {
				this.assureDrawer = false;
			},
			onsubmit: function() {
				subreceive(data).then((res) => {
					console.log(res)
					if (res.code === 200) {
						this.$util.Tips({
							title: "成功"
						});
						this.loading = false
						this.active = true
					}
				}).catch(err => {
					this.$util.Tips({
						title: err
					});
					this.loading = false
				});
			},
			onStatusControl: function(type) {
				console.log(type)
				let data = ""
				if (type === 1) {
					data = "撤销"
				}
				if (type === 2) {
					data = "支付"
				}
				if (type === 3) {
					data = "确认"
				}
				if (type === -1) {
					data = "已取消"
				}
				return data
			},
			onsubcontrol: function(item) {
				this.clickitem = item
				if (item.status === 1) {
					// 取消
					this.title = "是否撤销？"
					this.active = true
				}
				if (item.status === 2) {
					// 支付
					this.title = "是否支付？"
					this.active = true
				}
				if (item.status === 3) {
					// 确认
					this.title = "是否确认？"
					this.active = true
				}
			},
			// 撤销
			subStatus: function() {
				const data = {
					id: this.clickitem.id
				}
				subcancel(data).then((res) => {
					console.log(res)
					if (res.code === 200) {
						this.$util.Tips({
							title: "成功"
						});
						this.getmyLists()
						this.loading = false
						this.active = false
					}
				}).catch(err => {
					this.$util.Tips({
						title: err
					});
					this.loading = false
				});
			},
			// 支付
			subPay: function() {
				const data = {
					id: this.clickitem.id
				}
				submitpay(data).then((res) => {
					console.log(res)
					if (res.code === 200) {
						this.$util.Tips({
							title: "成功"
						});
						this.getmyLists()
						this.loading = false
						this.active = true
					}
				}).catch(err => {
					this.$util.Tips({
						title: err
					});
					this.loading = false
				});
			},
			// 取消
			subVerify: function() {
				const data = {
					id: this.clickitem.id
				}
				subconfirm(data).then((res) => {
					console.log(res)
					if (res.code === 200) {
						this.$util.Tips({
							title: "成功"
						});
						this.getmyLists()
						this.loading = false
						this.active = true
					}
				}).catch(err => {
					this.$util.Tips({
						title: err
					});
					this.loading = false
				});
			},
			// 确定
			submitok1: function() {
				if (this.clickitem.status === 1) {
					// 取消
					this.subStatus()
				}
				if (this.clickitem.status === 2) {
					// 支付
					this.subPay()
				}
				if (this.clickitem.status === 3) {
					// 确认
					this.subVerify()
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
	}

	.content {
		width: 100%;
		height: 160px;
		padding: 0px 20px 20px 20px;
		padding-top: 30px;
		background-color: #e73224;
		background-repeat: no-repeat;
		background-size: 100%;
	}

	.body-tab {
		z-index: 999;
		width: 92%;
		margin: 0 auto;
		background-color: #FFFFFF;
		border-top-right-radius: 10px;
		border-top-left-radius: 10px;
		border: 1px solid lavender;
		position: relative;
		top: -20px;
	}

	/* 顶部资产行 */
	.asset-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30px;

		.asset-item {
			flex: 1;
			text-align: center;
			color: #fff;

			.label {
				display: block;
				font-size: 13px;
				margin-bottom: 5px;
			}

			.value {
				font-size: 18px;
				color: #f79b6d;
				font-weight: bold;
			}
		}
	}


	.statics {
		width: 92%;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 10px;
		margin-top: -40px;
		padding: 10px;

		.statics-title {
			display: flex;

			image {
				width: 20px;
				height: 20px;
			}

			view {
				font-size: 16px;
				color: #333;
				margin-left: 5px;
			}
		}

		.statics-total {
			width: 100%;
			display: flex;
			padding: 10px;
			text-align: center;

			.statics-center {
				width: 50%;
				padding: 10px 0px 0px 0px;

				:nth-child(1) {
					color: #333;
					font-weight: 600;
					font-size: 17px;
				}

				:nth-child(2) {
					color: #b1b1b1;
					line-height: 26px;
					font-size: 15px;
				}
			}
		}
	}

	.statics1 {
		width: 92%;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 10px;
		margin-top: 20px;
		height: 170px;
		padding: 10px;
	}

	.tabs {
		width: 90%;
		margin: 0 auto;
		height: 350px;
		overflow: auto;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		background-color: #fff;
		margin-top: 20px;
	}

	.form {
		width: 100%;
		display: flex;
		padding: 10px 10px 10px 20px;
		height: 70px;
		border-bottom: 1px solid #f9f9f9;

		.form-left {
			width: 70%;

			.from-name {
				font-size: 13px;
				font-weight: 700;
				color: #704248;
			}

			.from-type {
				font-size: 14px;
				color: #333;
				font-weight: 700;
				line-height: 20px;
			}

			.from-time {
				font-size: 13px;
				font-weight: 500;
				line-height: 20px;
				color: #333;
			}

			.from-time1 {
				font-size: 12px;
				// font-weight: 500;
				line-height: 15px;
				color: #333;
			}
		}

		.form-right {
			width: 30%;
			font-size: 15px;
			text-align: right;
			position: relative;

			.into-btn {
				position: absolute;
				right: 10px;
				padding: 3px;
				width: 50px;
				font-size: 12px;
				height: 22px;
				line-height: 15px;
				text-align: center;
				background-color: #d2b380;
				border-radius: 10px;
				color: #333;
			}

			.into-btn1 {
				float: right;
				margin-top: 5px;
				position: relative;
				top: -3px;
				right: 10px;
				padding: 3px;
				width: 60px;
				font-size: 11px;
				height: 20px;
				line-height: 14px;
				text-align: center;
				background-color: #d2b380;
				border-radius: 5px;
				color: #333;
			}

			.out-btn {
				position: relative;
				top: 25px;
				right: 22px;
				line-height: 20px;
				color: #acacac;
				font-size: 12px;
			}
		}

		.form-line {
			width: 100%;
			height: 1px;
			transform: scale(0.1);
		}
	}

	/* Tab切换样式 */
	.tab-container {
		display: flex;
		background-color: #fff;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		width: 90%;
		position: absolute;
		z-index: 1;

		.tab-item {
			flex: 1;
			text-align: center;
			padding: 15px 0;
			position: relative;
			font-size: 14px;
			color: #666;

			&.active {
				color: #e73224;
				font-weight: bold;
			}

			.tab-line {
				position: absolute;
				bottom: 0;
				left: 33%;
				width: 40px;
				height: 2px;
				background: #e73224;
			}
		}
	}


	.price {
		font-size: 28rpx;
		color: #fbffff;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 40px;
		height: 2px;
		background: #e73224;
		/* 将白色改为红色 */
		border-radius: 3rpx;
	}

	.action-buttons {
		display: flex;
		gap: 20px;
		justify-content: center;
		margin: 20px 0;
	}

	.action-btn {
		text-align: center;
		width: 33%;

		image {
			width: 35px;
			height: 35px;
		}

		view {
			font-size: 14px;
		}
	}

	.signTip {
		width: 644rpx;
		height: 285rpx;
		position: fixed;
		top: 50%;
		left: 50%;
		margin-left: -322rpx;
		margin-top: -322.5rpx;
		border-radius: 10px;
		z-index: 99;
		text-align: center;
		transition: all 0.3s ease-in-out 0s;
		opacity: 0;
		transform: scale(0);
		background-color: #fff;

		.sign-title {
			width: 100%;
			font-size: 40rpx;
		}

		.signbtn {
			width: 100%;
			display: flex;
			padding-top: 28px;

			:nth-child(1) {
				width: 100%;
				width: 130px;
				background-color: #333;
				color: #fff;
				border-radius: 20px;
				text-align: center;
				height: 40px;
				font-size: 16px;
				line-height: 40px;
			}

			:nth-child(2) {
				margin-left: 20px;
				width: 130px;
				background-color: #e73224;
				color: #fff;
				border-radius: 20px;
				text-align: center;
				height: 40px;
				font-size: 16px;
				line-height: 40px;
			}
		}
	}

	.on {
		opacity: 1;
		transform: scale(1);
	}

	.ensure {
		width: 100%;
		height: 250px;
		background-color: #fff;
		padding-bottom: 22rpx;
		padding-bottom: calc(22rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(22rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

		.title1 {
			font-size: 32rpx;
			text-align: center;
			background-color: #fff;
			margin: 20rpx 0 36rpx 0;
			position: relative;

			.iconfont {
				position: absolute;
				right: 30rpx;
				top: 0;
				font-size: 36rpx;
			}
		}

		.en-title {
			padding: 20px 20px 10px 20px;
			font-size: 16px;
			color: #333;

			text {
				color: #FFDEAD;
			}
		}

		.en-input {
			width: 90%;
			margin-left: 20px;
			height: 76rpx;
			border: 2rpx solid #eee;
			border-radius: 5rpx;
			padding: 0 24rpx;
			font-size: 32rpx;
		}

		.en-btn {
			width: 80%;
			margin: 0 auto;
			height: 40px;
			margin-top: 25px;
			background-color: #333;
			border-radius: 20px;
			color: #fff;
			text-align: center;
			line-height: 40px;
		}

	}

	.echart {
		width: 100%;
		height: 240px;
		background-color: #FFFFFF;
	}

	.mask {
		z-index: 9
	}

	.ensure.on {
		transform: translate3d(0, 0, 0);
	}

	.empty-state {
		text-align: center;
		color: #909399;
		padding: 20px;
		height: 120px;
	}
</style>
